<template>
	<view class="content">
		<view class="pT10 pL15 pR10 pB5">
			身份证正面
		</view>
		<view class="grace-idcard-items">
			<view class="grace-idcard-uper-btn relative">
				<view class="img" v-if="idCard1"  @click="selectImg1"><image style="height:300upx !important;" :src="idCard1" mode="widthFix" /></view>
				<view class="noimginshow" v-if="!idCard1"  @click="selectImg1">
					<view class="img"><image style="height:300upx !important;" src="../../static/imgs/idcard1.png" mode="widthFix" /></view>
					<view class="textdiv">
						<uni-icons type="plus-filled" color='#06C' size="50"></uni-icons>
						<view class="text">请上传身份证正面</view>
					</view>
					
				</view>
				
				<view class="deltrash" v-if="idCard1" @tap="delimgsrc('idCard1')">
					<uni-icons type="trash" color='#06C' size="30"></uni-icons>
				</view>
			</view>
		</view>	
		<view class="f12 pL15 pR10" style="padding: 11px;">
			<text style="text-align: center; margin: auto; line-height:30upx;text-indent:-2em;padding-top:10upx ;">您上传的身份证照片，仅用于本次信息读取，本系统不做保存，不作其他用途，请放心！</text>
		</view>
		<view class="input-group" style="padding-right:15upx ;margin-left: 13upx;margin-top: -5px;">
			<view class="input-row border">
				<text class="title">用户姓名：</text>
				<div class="cvc">{{ namex }}</div>
			</view>
		
			<view class="input-row border">
				<text class="title">用户性别：</text>
				<div class="cvc">{{ xingbie }}</div>
			</view>
		
			<view class="input-row border">
				<text class="title">身份证号：</text>
				<div class="cvc">{{ shenfenx }}</div>
			</view>
		
			<view class="input-row border">
				<text class="title">用户地址：</text>
				<div class="cvc">{{ dizhi }}</div>
			</view>
			
		</view>
		<!-- <view class="pT10 pL10 pR10 pB5">
			身份证反面
		</view>
		<view class="grace-idcard-items">
			<view class="grace-idcard-uper-btn relative" >
				<view class="img" v-if="idCard2" @tap="selectImg2"><image style="height:300upx !important;" :src="idCard2" mode="widthFix" /></view>			
					<view class="noimginshow" v-if="!idCard2" @tap="selectImg2">
						<view class="img"><image style="height:300upx !important;" src="../../static/imgs/idcard2.png" mode="widthFix" /></view>
						<view class="textdiv">
							<uni-icons type="plus-filled" color='#06C' size="50"></uni-icons>
							<view class="text">请上传身份证反面</view>
						</view>
					</view>
				<view class="deltrash" v-if="idCard2" @tap="delimgsrc('idCard2')">
					<uni-icons type="trash" color='#06C' size="30"></uni-icons>
				</view>
			</view>
			
		</view>
		<view class="f12 pL10 pR10">
			您上传的身份证照片，仅用于本次信息读取，本系统不作保存。请放心上传
		</view>
		<view class="input-group pB50">
			
			<view class="input-row border">
				<text class="title">签发机关：</text>
				<div class="cvc">{{ issuance }}</div>
			</view>
			<view class="input-row border">
				<text class="title">有效期限：</text>
				<div class="cvc" v-if="get_date">{{ get_date }}-{{ validity }}</div>
			</view>
			
		</view> -->
		<view :class="showtype?'btn-row2':'btn-row'">
			<view class="w90 mauto pT10 pB10">
				<button type="primary" class=" " @tap="register">下一步</button>
			</view>
		</view>
		
		<!-- 底部导航 -->
		<footernav pagePath='user' v-if="showtype"></footernav>
	</view>
</template>
<script>
var _self;
import mInput from '../../components/m-input.vue';
import {idcardupcache,userdelcache} from '../../common/api/user.js';
// import graceChecker from '../../common/graceChecker.js'
// import md5 from '../../common/md5.js'
// import {
// 	isEmpty
// } from '@/common/graceChecker.js'
import request from '../../common/vmeitime-http/requstx.js';
export default {
	components: {
		mInput
	},
	data() {
		return {
			account: '',
			password: '',
			repassword: '',
			email: '',
			captchaImg: '',
			message_code: '',
			issuance:"",
			validity:"",
			seconds: 60,
			codeBtn: {
				text: '获取验证码',
				waitingCode: false,
				count: this.seconds
			},
			idCard1: '',
			idCard2: '',
			code: '',
			shenfenx: '',
			namex: '',
			xingbie: '',
			dizhi: '',
			xingbiex: '',
			birthday:'',
			backdata:{
				data:'',
				src:"",
			},
			get_date:"",
			idcard_date_type:"",
			showtype:"",
		};
	},
	onLoad: function(enevt) {
		let that = this;
		if(enevt.type){
			var showtype='chidcard';
			this.showtype='chidcard';
		}else{
			var showtype='';
			this.showtype='';
		}
		
	},
	onShow() {
		this.showupcache();
	},
	methods: {
		showupcache(){
			idcardupcache({type:this.showtype}).then(res=>{
				console.log(res.data.data.imgurl)
				if(res.data.data.imgurl){
					this.idCard1=res.data.data.imgurl.src;
					this.data=res.data.data.imgurl;
					
					this.shenfenx = res.data.data.imgurl.identitycard;
					this.namex = res.data.data.imgurl.name;
					this.xingbie = res.data.data.imgurl.sex;
					this.dizhi = res.data.data.imgurl.address;
					this.srcx = res.data.data.imgurl.src;
					this.birthday=res.data.data.imgurl.birthday;
				}
				
				if(res.data.data.imgurl_b){
					this.backdata=res.data.data.imgurl_b;
					
					this.idCard2=res.data.data.imgurl_b.src;
					this.backdata.src=res.data.data.imgurl_b.src;
					this.issuance=res.data.data.imgurl_b.ca;
					this.validity=res.data.data.imgurl_b.lost_date;
					this.idcard_date_type=res.data.data.imgurl_b.idcard_date_type;
					this.get_date=res.data.data.imgurl_b.get_date;	
					
				
				}
				
			})
		},
		delimgsrc(type){
			if(type=='idCard1'){
				this.idCard1='';
				this.shenfenx = '';
				this.namex = '';
				this.xingbie = '';
				this.dizhi = '';
				this.srcx = '';
				this.birthday='';
				var pic_fx='front';
				
			}else{
				this.idCard2='';
				this.backdata.src="";
				this.issuance="";
				this.validity="";
				this.idcard_date_type="";
				this.get_date="";	
				var pic_fx='back';
				
			}
			// front-头像面  back--国徽面
			userdelcache({card:pic_fx,type:this.showtype}).then(res=>{
				console.log(res)
			})
		},
		selectImg2:function(e){
			let that=this;
			console.log('2')
			uni.chooseImage({
				count: 1,
				// sourceType: ['camera'], //从相册选择
				success: res => {
					that.idCard2 = res.tempFilePaths[0];
					console.log(res.tempFilePaths[0]);
					// this.shenfenx = '';
					// this.namex = '';
					// this.xingbie = '';
					// this.dizhi = '';
					// this.srcx = '';
					this.issuance="";
					this.validity="";
					// this.shenfenx=res.tempFilePaths[0];
					// 因底层限制一次上传一个
					uni.showLoading({
						title: '上传中'
					});
					// 上传正面
					const token = uni.getStorageSync('token');
					uni.uploadFile({
						url: this.apihttpurl+'/user/upload',
						header: {
							token: token
						},
						filePath: that.idCard2,
						name: 'imgurl',
						formData: {
							c_type:'back',
							type:this.showtype
						},
						c_type:'back',
						success: res => {
							// 上传成功后返回服务器端保存的路径
							// console.log("getMachineNum success:" + JSON.stringify(res));
							console.log('获取code' + JSON.parse(res.data));
							this.backdata = JSON.parse(res.data);
							console.log(this.backdata);
			
							if (this.backdata.message == 'token已过期') {
								uni.hideLoading();
								console.log(this.backdata.message);
								uni.showToast({
									title: this.backdata.message,
									icon: 'none',
									duration: 2000
								});
			
								window.location.href = this.weixinhttpurl+'/#/pages/shouquan/shouquan';
							} else if (this.backdata.message == 'token不存在') {
								uni.hideLoading();
								console.log(this.backdata.message);
								uni.showToast({
									title: this.backdata.message,
									icon: 'none',
									duration: 2000
								});
			
								window.location.href = this.weixinhttpurl+'/#/pages/shouquan/shouquan';
							} else if (this.backdata.code == 400) {
								alert("400"+that.idCard2);
								uni.hideLoading();
								console.log(this.backdata.message);
								// uni.showToast({
								// 	title: this.backdata.message,
								// 	icon: 'none',
								// 	duration: 2000
								// });
								uni.showModal({
								    title: '',
								    content: this.backdata.message,						
									showCancel:false,
									buttonText: '确定',
									confirmText: "确定",
								    success: function (res) {
								        if (res.confirm) {
								            console.log('用户点击确定');										
								        } else if (res.cancel) {
								            console.log('用户点击取消');
								        }
								    }
								});
								
							} else if (this.backdata.code == 200) {
								this.issuance=this.backdata.data.ca;
								this.validity=this.backdata.data.lost_date;
								this.get_date=this.backdata.data.get_date;
								this.idcard_date_type=this.backdata.data.idcard_date_type;
								// this.shenfenx = this.data.data.identitycard;
								// this.namex = this.data.data.name;
								// this.xingbie = this.data.data.sex;
								// this.dizhi = this.data.data.address;
								// this.srcx = this.data.src;
								// console.log('huqox' + this.shenfenx);
								// console.log(this.namec);
								// if (this.data.data.sex == '男') {
								// 	this.xingbiex = 1;
								// } else {
								// 	this.xingbiex = 2;
								// }
								uni.hideLoading();
			
								uni.showToast({
									title: this.data.message,
			
									duration: 2000
								});
								alert(that.idCard2);
							}
						}
					});
				}
			});
		},
		selectImg1: function() {
			let that = this;
			uni.chooseImage({
				count: 1,
				// sourceType: ['camera'], //从相册选择
				success: res2 => {
					var imgsrc=res2.tempFilePaths[0];
					console.log(res2.tempFilePaths[0]);
					console.log("res:"+res2)
					that.shenfenx = '';
					that.namex = '';
					that.xingbie = '';
					that.dizhi = '';
					that.srcx = '';
					// that.shenfenx=res.tempFilePaths[0];
					// 因底层限制一次上传一个
					uni.showLoading({
						title: '上传中'
					});
					// 上传正面
					const token = uni.getStorageSync('token');
					// alert(res2.tempFilePaths[0])
					
					uni.uploadFile({
						url: that.apihttpurl+'/user/upload',
						header: {
							token: token
						},
						formData: {
							type:that.showtype
						},
						filePath: imgsrc,
						name: 'imgurl',
						success: res => {
							that.idCard1 = imgsrc;
							// 上传成功后返回服务器端保存的路径

							// console.log("getMachineNum success:" + JSON.stringify(res));
							console.log('获取code' + JSON.parse(res.data));
							that.data = JSON.parse(res.data);
							console.log(that.data);

							if (that.data.message == 'token已过期') {
								uni.hideLoading();
								console.log(that.data.message);
								uni.showToast({
									title: that.data.message,
									icon: 'none',
									duration: 2000
								});

								window.location.href = that.weixinhttpurl+'/#/pages/shouquan/shouquan';
							} else if (that.data.message == 'token不存在') {
								uni.hideLoading();
								console.log(that.data.message);
								uni.showToast({
									title: that.data.message,
									icon: 'none',
									duration: 2000
								});

								window.location.href = that.weixinhttpurl+'/#/pages/shouquan/shouquan';
							} else if (that.data.code == 400) {
								// alert("400"+that.idCard2);
								uni.hideLoading();
								console.log(that.data.message);
								// uni.showToast({
								// 	title: that.data.message,
								// 	icon: 'none',
								// 	duration: 2000
								// });
								uni.showModal({
								    title: '',
								    content: that.data.message,						
									showCancel:false,
									buttonText: '确定',
									confirmText: "确定",
								    success: function (res) {
								        if (res.confirm) {
								            console.log('用户点击确定');										
								        } else if (res.cancel) {
								            console.log('用户点击取消');
								        }
								    },
									
								});
							} else if (that.data.code == 200) {
								that.shenfenx = that.data.data.identitycard;
								that.namex = that.data.data.name;
								that.xingbie = that.data.data.sex;
								that.dizhi = that.data.data.address;
								that.srcx = that.data.src;
								that.birthday=that.data.data.birthday;
								console.log('huqox' + that.shenfenx);
								console.log(that.namec);
								if (that.data.data.sex == '男') {
									that.xingbiex = 1;
								} else {
									that.xingbiex = 2;
								}
								uni.hideLoading();

								uni.showToast({
									title: that.data.message,

									duration: 2000
								});
								// alert("200"+that.idCard2);
							}

							// 上传背面
							//  uni.setStorage({
							//      key: 'shen',
							//      data: this.data.data,
							//      success: (res) =>{
							//          console.log(res);
							//  setTimeout(()=>{

							// uni.getStorage({
							//     key: 'shen',
							//    success: (res) =>{
							//         console.log(res.data);
							// 		this.namex=res.data.name;
							// 		console.log(this.namex);
							//     }
							// });
							// }, 1000)
							//      }
							//  });
						}
					});
				}
			});
		},

		// previewImg1 : function(){
		// 	uni.previewImage({
		// 		urls:[_self.idCard1]
		// 	});
		// },
		register: function(e) {
			let that = this
			/**
			 * 客户端对账号信息进行一些必要的校验。
			 * 实际开发中，根据业务需要进行处理，这里仅做示例。
			 */
			// uni.navigateTo({
			// 	url: '/pages/shouquan/renlian'
			// });
			// return
			
			if (this.idCard1 == '') {
				uni.showToast({
					icon: 'none',
					title: '请上传身份证正面'
				});
				return;
			}
			// if (this.idCard2 == '') {
			// 	uni.showToast({
			// 		icon: 'none',
			// 		title: '请上传身份证反面'
			// 	});
			// 	return;
			// }
			
			if (this.namex.length == '') {
				uni.showToast({
					icon: 'none',
					title: '姓名不能为空'
				});
				return;
			}
			
			// if (this.issuance.length == '') {
			// 	uni.showToast({
			// 		icon: 'none',
			// 		title: '请上传身份证反面'
			// 	});
			// 	return;
			// }
			if (this.xingbie.length == '') {
				uni.showToast({
					icon: 'none',
					title: '性别不能为空'
				});
				return;
			}
			if (this.shenfenx.length == '') {
				uni.showToast({
					icon: 'none',
					title: '身份证号不能为空'
				});
				return;
			}
			if (this.dizhi.length == '') {
				uni.showToast({
					icon: 'none',
					title: '地址不能为空'
				});
				return;
			}

			const data = {
				account: this.account,
				password: this.password,
				email: this.email
			};
			// this.backdata.data
			let detail = {
				name: this.namex,
				sex: this.xingbiex,
				address: this.dizhi,
				identitycard: this.shenfenx,
				// company:this.repassword,
				imgurl: this.srcx,
				
				issuance:this.issuance,
				imgurl_b:this.backdata.src,
				idcard_date_type:this.idcard_date_type,
				idcard_date_begin:this.get_date,
				idcard_date_end:this.validity,
				birth:this.birthday,
				type:this.showtype	
				
			};

			this.shenfenx = '';
			this.namex = '';
			this.xingbie = '';
			this.dizhi = '';
			this.srcx = '';
			that.idCard1 = '';
			uni.navigateTo({
				url: '/pages/shouquan/renlian?detailDate=' + encodeURIComponent(JSON.stringify(detail))
			});
			// request({
			// 	url: "user/information",
			// 	method: 'POST',
			// 	data: {
			// 		name: this.namex,
			// 		sex: this.xingbiex,
			// 		address: this.dizhi,
			// 		identitycard: this.shenfenx,
			// 		// company:this.repassword,
			// 		imgurl: this.srcx

			// 	},
			// 	success: (res) => {

			// 		if (res.data.message == '保存成功') {
			// 			uni.showToast({
			// 				title: res.data.message,
			// 				icon: 'none',
			// 				duration: 2000
			// 			});
			// 			this.shenfenx = "";
			// 			this.namex = "";
			// 			this.xingbie = "";
			// 			this.dizhi ="";
			// 			this.srcx ="";
			// 			_self.idCard1 = "";

			// 			uni.navigateTo({
			// 				url: '/pages/shouquan/renlian?name=test&age=18'
			// 			});
			// 		} else if (res.data.message == '身份证验证失败') {
			// 			uni.showToast({
			// 				title: res.data.message,
			// 				icon: 'none',
			// 				duration: 2000
			// 			});
			// 		} else if (res.data.message == '身份证号码已注册') {
			// 			uni.showToast({
			// 				title: res.data.message,
			// 				icon: 'none',
			// 				duration: 2000
			// 			});
			// 		} else if (res.data.message == 'token已过期') {
			// 			uni.showModal({
			// 				title: res.data.message,
			// 				content: res.data.message,
			// 				showCancel: this.forcedLogin,
			// 				success: (res) => {
			// 					if (res.confirm) {

			// 						window.location.href = this.weixinhttpurl+'/#/pages/shouquan/shouquan'

			// 					}
			// 				}
			// 			});
			// 		}
			// 		console.log(res.data);

			// 	}
			// })
		},
		sendCode: function() {
			this.codeBtn.waitingCode = true;
			this.codeBtn.count = this.seconds;
			this.codeBtn.text = this.codeBtn.count + 's';

			let countdown = setInterval(() => {
				this.codeBtn.count--;
				this.codeBtn.text = this.codeBtn.count + 's';
				if (this.codeBtn.count < 0) {
					clearInterval(countdown);
					this.codeBtn.text = '重新发送';
					this.codeBtn.waitingCode = false;
				}
			}, 1000);

			console.log(221);
			const data = {
				username: this.captchaImg
			};
			request({
				url: 'user/send',
				method: 'POST',
				data: {
					mobile: this.captchaImg
				},
				success: function(res) {
					console.log(res.data);
				}
			});
		},
		gotoLogin: function() {
			uni.navigateTo({
				url: 'login'
			});
		}
	},
	computed: {
		disableCodeBtn: function() {
			return this.codeBtn.waitingCode || this.captchaImg.length < 11;
		}
	}
};
</script>
<style scoped>
.cvc {
	line-height: 38px;
	padding-top: 10upx;
}

.content {
	display: flex;
	flex: 1;
	flex-direction: column;
	background-color: #efeff4;
	padding-bottom: 100px;
	
}
.sb {
	font-size: 15px;
	width: 104px;
	margin-right: 10px;
	margin-top: 5px;
	margin-bottom: 5px;
}

img {
	height: 300upx !important;
}

view {
	font-size: 28upx;
}

.grace-idcard-main {
	margin: 20upx 30upx;
}

.grace-idcard-desc {
	line-height: 2em;
	background: #ffffff;
	padding: 20upx;
	border-radius: 10upx;
}

.grace-idcard-text {
	line-height: 2em;
	margin-top: 30upx;
}

.grace-idcard-items {
	background: #ffffff;
	padding: 10upx 0;
	display: flex;
	/* margin: 30upx 0; */
	border-radius: 10upx;
	align-items: flex-start;
}

.grace-idcard-uper-btn {
	width: 576upx;
	height: 350upx;
	margin: 0 auto;
	background: #f1f1f1;
	padding-bottom: 10upx;
	border-radius: 10upx;
	text-align: center;
}

.grace-idcard-uper-btn .img {
	width: 500upx;
	height: 100upx;
	margin: 0 auto;
	margin-top: 30upx;
}

.grace-idcard-uper-btn .img image {
	width: 500upx;
	height: 300upx !important;
}

.grace-idcard-uper-btn .text {
	width: 100%;
	margin-top: 10upx;
	text-align: center;
	line-height: 2em;
}

.grace-idcard-preview {
	width: 50%;
	margin: 0 30upx;
	
}

.grace-idcard-preview image {
	width: 100%;
	height: 300upx !important;
}
.btn-row{    position: fixed; width: 100%;bottom: 0;left: 0;background: #fff;}
.btn-row2{    position: fixed; width: 100%;bottom: 50px;left: 0;background: #fff;}
.noimginshow .img{opacity: 0.5;}
.noimginshow .text{color: #06C;}
.noimginshow .textdiv{    position: absolute; width: 100%; text-align: center; left: 0;}
.deltrash{position: absolute; text-align: center; right: 10upx;top:10upx;background-color: #fff;}
</style>
